<template>
<Card dis-hover :bordered="false">
    <Form inline>
        <Button 
        type="primary" 
        @click="handleAdd" 
        class="ivu-mb-16"
        v-hasC="{
            name: 'v1-base-common-status-update-common-status',
            flag: 'v1/base/common-status/update-common-status',
        }">新增</Button>        
    </Form>
    <Table :columns="columns" :data="list" :loading="loading"  :max-height="tableHeigth">
         <template #status_name='{row}'>
            <Badge status="success" :text="row.status_name" v-if="row.status_name ==='正常'"/>
            <Badge status="error" :text="row.status_name" v-else/>
        </template>
        <template #action="{row}">
                <a 
                @click="handleEdit(row)"
                v-hasC="{
                    name: 'v1-base-common-status-update-common-status2',
                    flag: 'v1/base/common-status/update-common-status',
                }">编辑</a>
                <Divider 
                type="vertical" 
                v-hasC="{
                    name: 'v1-base-common-status-update-common-status2',
                    flag: 'v1/base/common-status/update-common-status',
                }"/>
                <a 
                @click="handleDel(row.id)"
                class="del"
                v-hasC="{
                    name: 'v1-base-common-status-delete-common-status',
                    flag: 'v1/base/common-status/delete-common-status',
                }">删除</a>
        </template>
    </Table>
    <Page class="ivu-mt-16" :total="total" :modelValue="params.current"  :page-size="params.size" :page-size-opts="pageOpts" show-total show-sizer  @on-change="changePage" @on-page-size-change="changepageSize"/>
    <Modal :mask-closable="false" v-model="addModal" :title="edit?'新增':'编辑'" :footer-hide=true :draggable="true">
        <Form ref="create" :model="aiInfo" :rules="rules" :label-width="100">            

            <FormItem label="AI模型名称" prop="name" required>
                <Input v-model="aiInfo.name" placeholder="请输入模型名称" :maxlength="30"/>
            </FormItem>
            <FormItem label="AI Code" prop="code" required>
                <Input v-model="aiInfo.code" placeholder="AI Code"/>
            </FormItem>
            <FormItem label="AI Key" prop="key" required>
                <Input type="textarea" v-model="aiInfo.key" placeholder="AI Key" :rows="4"/>
            </FormItem>

            <FormItem label="状态" prop="status">
                <Switch v-model="aiInfo.status" />
            </FormItem>
        </Form>
        <div slot="footer" style="text-align:right;">
            <Button type="default" @click="addModal=false" >取消</Button>
            <Button type="primary" @click="ok" style="margin-left:10px;" :loading="btnLoading">确定</Button>
        </div>
    </Modal>

</Card>
</template>
<script>
    import {basicSetList,createBasicSet,deleteBasicSet} from '@api/basicset.js'
    export default {
        name: 'aiset',
        data () {
            return {
                tableHeigth:document.body.clientHeight-270,
                addModal:false,
                edit:true,
                loading:false,
                btnLoading:false,
                params:{current: 1,size: 10}, 
                total:0,
                pageOpts:[10, 20, 30, 40],
                columns:[                    
                    {
                        key:'name',
                        title:'AI模型名称',
                        minWidth:125
                    },
                    {
                        key:'code',
                        title:'AI CODE'
                    },
                    {
                        key:'key',
                        title:'AI KEY'
                    },
                    {
                        slot:'status_name',
                        title:'状态'
                    },                                  
                    {
                        slot:'action',
                        title:'操作',
                        width:110,
                        fixed:'right'
                    }
                ],
                list:[],                
                aiInfo:{
                    code:'',
                    name:'',
                    key:100,
                    status:true
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称' }
                    ],
                    code: [
                        { required: true, message: '请输入Code' }
                    ],
                    key: [
                        { required: true, message: '请输入Key' }
                    ]
                }
            };
        },
        mounted() {
            // this.getData(this.type)           
        },
        methods: {
             //切换page
            changePage(index){
                this.params.current=index
                this.getData()
            },  
            changepageSize(val){
                this.params.size=val
                this.getData()
            },
            handleDel(index) {
                this.$Modal.confirm(
                    {
                        title:'删除提示',
                        content:'是否确认删除此条记录，删除后不可恢复',
                        onOk:()=> {
                            deleteBasicSet({code:index}).then(()=>{
                                this.$Message.success('删除成功')
                                this.getData()
                            }).catch(()=>{

                            })
                            
                        }
                    }
                )
            },
            handleAdd() {
                this.aiInfo={
                    code:'',
                    name:'',
                    key:'',
                    status:true
                }                
                this.addModal = true
                this.edit = true
                this.$refs.create.resetFields(); 
            },
            handleEdit(info) {
                this.addModal = true
                this.edit = false
                this.aiInfo={
                    code:info.code, 
                    name:info.name,
                    key:info.key,
                    status:info.status==1?true:false
                }
                
            },
            getData() {
                this.loading = true
                const params={                    
                    pageSize:this.params.size,
                    page:this.params.current,
                    order_column:this.params.order_column,
                    order_sort:this.params.order_sort
                }                
                basicSetList(params).then(res=> {
                    this.list = res.list
                    this.total=res.total
                    this.loading = false
                }).finally(()=> {
                    this.loading = false
                })
            },
            addBasicSet(){
                this.btnLoading=true
                const params={
                    code:this.aiInfo.code,
                    name:this.aiInfo.name,
                    key:this.aiInfo.key,
                    status:this.aiInfo.status?1:0                    
                } 
                if(this.edit){
                    createBasicSet(params).then((res) => {
                        this.$Message.success('添加成功')
                        this.addModal = false
                        this.btnLoading=false
                        this.params.current=1
                        this.getData();
                    }).catch(()=>{
                        this.btnLoading=false
                    });
                }else{
                    createBasicSet(Object.assign({},params,{code:this.aiInfo.code})).then((res) => {
                        this.$Message.success('编辑成功')
                        this.addModal = false
                        this.btnLoading=false
                        this.getData();
                    }).catch(()=>{
                        this.btnLoading=false
                    });
                }
               
            },
            ok(){
                this.$refs.create.validate(valid => {
                    if(valid) {
                        this.addBasicSet()   
                    }else{
                        this.addModal = true
                        return;
                    }
                })
                
            }
        },
       
    };
</script>